<!DOCTYPE html>
<html lang="en">
<head>
	<title>SuperChromePass Options</title>
	<style type="text/css">

	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="supergenpass.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){

			addpassword = (function(i,fade){
				stealth = localStorage['password_'+i+'_salt'] || '';
				storestr = localStorage['password_'+i+'_type']=='none'?
					'No password is stored':
					'Stored as <em>'+localStorage['password_'+i+'_type']+'</em>';

				$('#saved_passwords').append(
					$('<ul/>',{id: 'password_'+i,class: 'added'}).append(

						$('<li/>').text(localStorage['password_'+i+'_name'] || ''),
						$('<li/>').text(localStorage['password_'+i+'_length'] || ''),
						$('<li/>').html(storestr),
						$('<li/>').text(stealth.length>0?'With Stealth':' '),
						$('<li/>').append(
							$('<button/>',{class: 'delete'}).text('Delete Password')
						)
					)
				);

				if(typeof fade != 'undefined')
				{
					$('#password_'+i).hide().animate({height: 'toggle',opacity: 'toggle'},500,
						function(){$(this).removeClass('added')});
				}
				else
				{
					$('#password_'+i).removeClass('added');
				}
			});

			passes = JSON.parse(localStorage['passwords'] || '[]');
			for(i=0;i<passes.length;++i){addpassword(passes[i]);}

			$('#length').change(function()
			{
				$('#range_val label').text($(this).val());
			}).keydown(function(e)
			{
				if(e.keyCode==37)
				{
					$(this).val(parseInt($(this).val())-1);
					$('#range_val label').text($(this).val());
				}
				else if(e.keyCode==39)
				{
					$(this).val(parseInt($(this).val())+1);
					$('#range_val label').text($(this).val());
				}
			}).click(function(){$(this).focus()});

			$('.reveal').click(function()
			{
				$(this).next('input').get(0).type =
					$(this).next('input').attr('type')=='password'?'text':'password';
			});

			$('#buttonset button').click(function()
			{
				$('#buttonset button').removeClass('toggle').filter(this).addClass('toggle');
				$(this).attr('id')=='none'?
					$('#password').attr('disabled','disabled'):
					$('#password').removeAttr('disabled');
			});

			$('#buttonset button, #stealth').
				bind('mouseenter focus',function()
				{
					$('#'+this.id+'_answer').fadeIn(250);
				}).
				bind('mouseleave blur',function()
				{
					$('#'+this.id+'_answer').fadeOut(250);
				}).mousemove(function(e)
				{
					$('.answer_box').css({ left: e.pageX });
				});

			$('#saved_passwords .delete').live('click',function(){

				id = $(this).parents('ul').addClass('deleted').fadeOut(500,function(){
					$(this).remove();
				}).attr('id');
				delete localStorage[id+'_name'];
				delete localStorage[id+'_type'];
				delete localStorage[id+'_length'];
				delete localStorage[id+'_password'];
				delete localStorage[id+'_salt'];
				passes = JSON.parse(localStorage['passwords']);
				val = id.replace('password_','');
				passes = passes.filter(function(v){if(v==val){return false;}return true;});
				localStorage['passwords'] = JSON.stringify(passes);

			});

			$('#save').click(function(){

				//User needs to save their password:
				i = b64_md5($('#name').val()).substring(0,5) || 'scpg'+Math.floor(Math.random()*100);
				if(localStorage['passwords'] && localStorage['passwords'].indexOf('"'+i+'"')>0)
				{
					$('#name').focus().addClass('bad').keyup(function(){$(this).removeClass().unbind('keyup');});
					return false;
				}
				if(typeof localStorage['passwords'] != 'string')
				{
					localStorage['passwords'] = JSON.stringify([i]);
				}
				else
				{
					passes = JSON.parse(localStorage['passwords']);
					passes.push(i);
					localStorage['passwords'] = JSON.stringify(passes);
				}
				localStorage['password_'+i+'_name'] = $('#name').val() || 'My Password';
				localStorage['password_'+i+'_type'] = $('#buttonset .toggle:first').attr('id');
				localStorage['password_'+i+'_length'] = $('#length').val() || 10;
				switch(localStorage['password_'+i+'_type'])
				{
					case 'hash':
						localStorage['password_'+i+'_password'] = b64_md5($('#password').val());
					break;
				 case 'session':
						var bg = chrome.extension.getBackgroundPage();
						bg.session_password = $('#password').val();
					break;
				 case 'always':
						localStorage['password_'+i+'_password'] = $('#password').val();
					break;
				}
				if($('#stealth').val().length>0)
				{
					localStorage['password_'+i+'_salt'] = $('#stealth').val();
				}

				addpassword(i,true);


			});

			$('#notonload').click(function(){
				var options = JSON.parse(localStorage['options'] || '{}');
				if($(this).is(':checked'))
				{
					options.notonload = false;
				}
				else
				{
					options.notonload = true;
				}
				localStorage['options'] = JSON.stringify(options);
			});

			$('#key_key').keyup(function(e){
				var options = JSON.parse(localStorage['options'] || '{}');
				options.key_key=this.value;
				localStorage['options'] = JSON.stringify(options);
			});

			var options = JSON.parse(localStorage['options'] || '{}');

			$('#key_key').val(options.key_key || 'P');
			options.notonload?
				$('#notonload').removeAttr('checked','checked'):
				$('#notonload').attr('checked','checked');

		});

	</script>
	<style type="text/css">
	 html,body{ height: 100%; margin: 0; padding: 0; }
		body{
			width:           900px;
			margin:          0 auto;
			font-family:     sans-serif;
			background:      -webkit-gradient(
																			  linear,
																			  left bottom,
																			  left top,
																			  from(#edeef1),
																			  to(#e3e5ea)
																		  );
			color:           #000;
			text-shadow:     1px 1px 0 rgba(255,255,255,0.75);
			font-weight:     bold;
			-webkit-font-smoothing: subpixel-antialiased;
		}
		#header{
			background:      url('icon_128.png') no-repeat left center;
			padding:         0 0 0 140px;
			height:          100px;
			text-align:      left;
			margin:          0 0 0 50px;
			line-height:     100px;
			font-size:       14px;
		}
		#header a{
			text-decoration: none;
			color:           #000;
		}
		#saved_passwords{
			width:           800px;
			margin:          0 auto;
			padding:         0;
			clear:           both;
			display:         block;
		}
		#saved_passwords ul{
			width:           800px;
			float:           left;
			clear:           both;
			border-bottom:   1px solid rgba(0,0,0,0.3);
			-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.75);
			margin:          0;
			padding:         10px 0 0 0;
		}
		#saved_passwords ul.deleted{
			background:      rgba(255,128,128,0.25);
		}
		#saved_passwords ul.added{
			background:      rgba(128,255,128,0.25);
		}
		#saved_passwords li{
			float:           left;
			list-style:      none;
			display:         inline;
			margin:          0;
			padding:         0;
			overflow:        hidden;
		}
		#saved_passwords li:nth-child(1){
			font-size:       18px;
			width:           190px;
			padding:         5px;
			margin:          0 20px;
			text-align:      right;
		}
		#saved_passwords li:nth-child(2){
			font-size:       12px;
			font-style:      italic;
			text-shadow:     none;
			width:           20px;
			padding:         8px 0;
			text-align:      center;
		}
		#saved_passwords li:nth-child(3){
			font-size:       12px;
			text-shadow:     none;
			width:           200px;
			text-align:      center;
			padding:         8px 0;
			color:           #aaa;
		}
		#saved_passwords li:nth-child(3) em{
			color:           #000;
			font-style:      normal;
		}
		#saved_passwords li:nth-child(4){
			font-size:       12px;
			text-shadow:     none;
			width:           150px;
			text-align:      center;
			padding:         8px 0;
		}
		#saved_passwords li:nth-child(5){
			font-size:       12px;
			text-shadow:     none;
			width:           180px;
			text-align:      center;
			padding:         8px 0;
		}
		#saved_passwords button{
			width:           125px;
			margin-top:      -8px;
			padding:         5px 0;
			background:      -webkit-gradient(
                     linear,
                     left bottom,
                     left top,
                     from(#c00),
                     to(#f44)
                    );
			-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.75);
			border-radius:   40px;
			border:          1px solid #900;
			font-size:       12px;
			font-weight:     bold;
			color:           #200;
			float:           right;
		}
		#saved_passwords button:hover{
			background:      -webkit-gradient(
                     linear,
                     left bottom,
                     left top,
                     from(#e00),
                     to(#f66)
                    );
		}
		#saved_passwords button:focus,#saved_passwords button:active{
			background:      -webkit-gradient(
                     linear,
                     left bottom,
                     left top,
                     from(#f44),
                     to(#c00)
                    );
		}
		.panel{
			border-radius:   30px;
			padding:         0 145px;
			border:          1px solid #000;
			width:           610px;
			margin:          20px 25px;
			clear:           both;
		}
		#general{
			width:           700px;
			padding:         0 100px;
		}
		.panel hr{
			border:          0;
			border-bottom:   1px solid rgba(255,255,255,0.3);
			border-top:      1px solid rgba(0,0,0,0.3);
		}
		.labels{
			margin:          30px 0 5px 0;
			padding:         0;
			display:         block;
			clear:           both;
		}
		.labels label{
			font-style:      italic;
			text-align:      center;
		}
		.labels.one label:nth-child(1){
			padding:         0 30px;
		}
		.labels.one label:nth-child(2){
			padding:         0 55px;
		}
		.labels.one label:nth-child(3){
			padding:         0 88px;
		}
		.labels.two{
			margin-left:     120px;
		}
		.labels.two label:nth-child(1){
			padding:         0 70px;
		}
		.labels.two label:nth-child(2){
			padding:         0 50px;
		}
		#name{
			float:           left;
			margin:          0 5px 0 0;
			padding:         3px;
			font-size:       12px;
			font-weight:     bold;
		}
		#name.bad{
			background:      #fdd;
		}
		.passwordset{
			float:           left;
		}
		.reveal{
			background:      url('%3D')
																		   no-repeat center,
																		  -webkit-gradient(
																			  linear,
																			  left bottom,
																			  left top,
																			  from(#f8b8a2),
																			  to(#fad0c1)
																		  );
			border:          1px solid #19b319;
			border-right:    0;
			width:           23px;
			height:          23px;
			border-radius:   8px 0 0 8px;
			text-align:      center;
			color:           #fff;
			margin:          0;
			padding:         0;
			font-family:     sans-serif;
			font-size:       11px;
			font-weight:     bold;
			line-height:     17px;
			cursor:          pointer;
			float:           left;
		}
		#password,#stealth{
			margin:          0;
			padding:         3px;
			font-size:       12px;
			font-weight:     bold;
			letter-spacing:  3px;
		}
		#buttonset{
			float:           left;
			margin:          0 10px;
			padding:         0;
		}
		#buttonset button{
			float:           left;
			margin:          0;
			padding:         0;
			font-size:       13px;
			font-weight:     bold;
			padding:         3px 8px 4px;
			border:          1px solid #000;
			border-left:     0;
			color:           #fff;
			text-shadow:     -1px -1px 0 #000;
			background:      -webkit-gradient(
																			  linear,
																			  left bottom,
																			  left top,
																			  from(#2b2b2b),
																			  to(#4d4d4d)
																		  );
		}
		#buttonset button:hover{
			background:      -webkit-gradient(
																			  linear,
																			  left bottom,
																			  left top,
																			  from(#444),
																			  to(#666)
																		  );
		}
		#buttonset button:focus, #buttonset button:active{
			background:      -webkit-gradient(
																			  linear,
																			  left bottom,
																			  left top,
																			  from(#4d4d4d),
																			  to(#2b2b2b)
																		  );
		}
		#buttonset button.toggle{
			background:      -webkit-gradient(
                     linear,
                     left bottom,
                     left top,
                     from(#4ae64a),
                     to(#08ce08)
                    );
			text-shadow:     0 0 3px #000;
		}
		#buttonset button:first-child{
			border-left:     1px solid #000;
			border-radius:   13px 0 0 13px;
		}
		#buttonset button:nth-child(4){
			border-radius:   0 13px 13px 0;
		}
		#range_val{
			border:          1px solid #ccc;
			background:      #eee;
			padding:         5px;
			float:           left;
			margin-top:      -3px;
			text-align:      center;
			width:           18px;
			margin-left:     120px;
		}
		#range_val div{
			border-width:    10px;
			border-color:    transparent transparent transparent #ccc;
			border-style:    solid;
			display:         block;
			position:        absolute;
			margin-top:      -20px;
			margin-left:     23px;
		}
		#length{
			float:           left;
			margin:          4px 20px 0 15px;
		}
		#save{
			margin:          30px 200px;
			width:           200px;
			padding:         8px 0;
			background:      -webkit-gradient(
                     linear,
                     left bottom,
                     left top,
                     from(#08ce08),
                     to(#4ae64a)
                    );
			-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.75);
			border-radius:   40px;
			border:          1px solid #19b319;
			font-size:       14px;
			font-weight:     bold;
			color:           #023b02;
		}

		#save:hover{
			background:      -webkit-gradient(
                     linear,
                     left bottom,
                     left top,
                     from(#09ef09),
                     to(#68ea68)
                    );
		}

		#save:focus, #save:active{
			background:      -webkit-gradient(
                     linear,
                     left bottom,
                     left top,
                     from(#4ae64a),
                     to(#08ce08)
                    );
		}

		#about{
			width:           590px;
			margin:          0 25px;
			padding:         20px 130px;
			text-align:      center;
			font-size:       10px;
		}
		.answer_box{
			width:           300px;
			height:          98px;
			margin-left:     -155px;
			position:        absolute;
			top:             45px;
			text-align:      center;
			padding:         20px;
			text-shadow:     none;
			font-size:       11px;
			color:           #fff;
			background:      -webkit-gradient(
																			  linear,
																			  left bottom,
																			  left top,
																			  from(#4d4d4d),
																			  to(#2b2b2b)
																		  );
			border-radius:   20px;
		}
	</style>
</head>
<body>

	<div id="header">
		<a href="http://code.google.com/p/superchromepass">
			<h1>SuperChromePass Options</h1>
		</a>
	</div>

	<div id="saved_passwords">
	</div>

	<div style="clear: both"></div>

	<div class="panel">
		<div class="labels one">
			<label for="password">Profile Name</label>
			<label for="password">Password</label>
			<label>Options</label>
		</div>

		<input id="name" type="text" value="My Password" autofocus="autofocus">

		<div class="passwordset">
			<div class="reveal" title="Reveal password"></div>
			<input type="password" id="password" value="" disabled="disabled">
		</div>

		<div id="buttonset">
			<button type="button" id="none" class="toggle">None</button>
			<button type="button" id="hash">Hash</button>
			<button type="button" id="session">Session</button>
			<button type="button" id="always">Always</button>
		</div>

		<div style="clear: both"></div>

		<div class="labels two">
			<label for="length">Length</label>
			<label for="length">Stealth Password</label>
		</div>

		<div id="range_val"><label for="length">10</label><div></div></div>
		<input id="length" type="range" min="4" max="25" step="1" value="10" style="width:150px">

		<div class="passwordset">
			<div class="reveal" title="Reveal password"></div>
			<input type="password" id="stealth" value="">
		</div>

		<button id="save">Save Password Profile</button>

	</div>

	<div class="panel" id="general">
		<h3>General Options</h3>

		<input type="checkbox" id="notonload" checked="checked">
		<label for="notonload">Automatically add SuperChromePass buttons to all password fields when the page loads</label>

		<hr>

		<label for="key_key">Ctrl + Shift</label>
		<input id="key_key" maxlength="1" type="text" style="width: 25px; font-weight: bold; text-align: center;">
		<label for="key_key">Shortcut Combination (when inside a password box)</label>
		<br><br>
	</div>

	<div id="about">
		<p>
			SuperChromePass is created and &copy; Keithamus, under the MIT licence for more
			information about the MIT licence, please visit the
			<a href="http://www.opensource.org/licenses/mit-license.php">OSI Licence Information</a>
		</p><p>
			You can donate to the SuperChromePass project by using
			<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=10497475">this link</a>
		</p><p>
			SuperChromePass is based off of the great work of
			<a href="http://www.supergenpass.com">SuperGenPass</a>
		</p>
	</div>

	<div id="hash_answer" style="display:none" class="answer_box">
		This will save a "hash" of your password. You can use a hash to check your
		password (making sure you've entered it correctly), but is securely stored in
		the browser, meaning it cannot be turned back into your password. This makes
		it secure, but helps you to make sure you correctly inputted your password.
		<div></div>
	</div>

	<div id="session_answer" style="display:none" class="answer_box">
		We will save your password as plaintext, inside the browser. When you close
		the browser, it will forget this information. This option is remembered so
		that you only have to enter it once every time you open your browser. This
		means your password is kept secure, so long <em>as you close your browser
		after each use</em>.
		<div></div>
	</div>

	<div id="always_answer" style="display:none" class="answer_box">
		We will save your password as plaintext, kept in the browser until you click
		to forget it. This is important because if someone uses your computer, they
		will have full access to your passwords. In other words; <em>do not use this
		option unless you fully understand the consequences and are sure no one else
		will use your computer</em>.
		<div></div>
	</div>

	<div id="stealth_answer" style="display:none" class="answer_box">
		A "stealth" password, also known as a "salt" is a special password that is
		added on to the end of your generated password. This adds just that little bit
		more security, to make your passwords even more obscure, <em>but you will need
		to remember your stealth password when away from this computer!</em>
		<div></div>
	</div>

</body>
</html>